<template>
  <div class="container">
    <div class="topSelect">
      <div
        v-for="(item, index) in selectList"
        :key="item.id"
        @click="chooseSelect(item, index)"
        :class="[{ active: activeIndex == index }]"
        class="selectitem"
      >
        <div class="left"><img :src="item.image" alt="" /></div>
        <div class="right">
          <div>{{ item.name }}</div>
          <!-- <div class="numValue">7</div> -->
        </div>
      </div>
    </div>
    <fireTable ref="fireTable" :pintType.sync="pintType"></fireTable>
    <!-- <confinedSpace  :pintType.sync="pintType"  v-show="activeIndex == 1"></confinedSpace> -->
  </div>
</template>

<script>
import { workTypeApi } from "@/api/workManagement";
import fireTable from "./component2/fireWorkTable.vue";
// import confinedSpace from "./component2/confinedSpace.vue";
export default {
  name: "",
  props: {},
  components: {
    fireTable,
    // confinedSpace,
  },
  data() {
    return {
      activeIndex: 0,
      selectList: [],
      pintType: "动火安全作业票",
    };
  },
  created() {
    this.workTypeApiGet();
  },
  methods: {
    chooseSelect(item, index) {
      this.activeIndex = index;
      this.pintType = item.name;
      console.log(item.name);
      this.$nextTick(() => {
        // if (item.name == "动火安全作业票") {
        // console.log(this.pintType);
        this.$refs.fireTable.getTicketList();
        // }
      });
    },
    async workTypeApiGet() {
      const res = await workTypeApi();
      const backendData = res.data;
      const localImages = [
        require("@/assets/common/组 7872.png"),
        require("@/assets/common/组 7875.png"),
        require("@/assets/common/组 7876.png"),
        require("@/assets/common/组 7877.png"),
        require("@/assets/common/组 7878.png"),
        require("@/assets/common/组 7879.png"),
        require("@/assets/common/组 7880.png"),
        require("@/assets/common/组 7882.png"),
      ];
      this.selectList = backendData.map((item, index) => ({
        ...item,
        image: localImages[index],
      }));
      this.$refs.fireTable.getTicketList();
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f6f8fa;

  .topSelect {
    display: flex;
    padding-top: 20px;
    .selectitem {
      margin-right: 10px;
      background: #ffffff;
      box-shadow: 0px 3px 4px 1px rgba(49, 50, 53, 0.06);
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 190px;
      height: 64px;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
      }
      .numValue {
        font-weight: bold;
        font-size: 18px;
        color: #313235;
      }
    }
    .active {
      background: #f3f9ff;
      border: 1px solid #81bdff;
      // color: #fff;
    }
  }

  .tableBox {
    margin-top: 16px;
    background-color: #fff;
    padding: 16px;

    .topSearch {
      background-color: #fff;
      height: 68px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .formSelf {
        display: flex;
        align-items: center;
        height: 68px;
        display: flex;
        align-items: center;
        .el-form-item {
          margin-bottom: 0px;
        }
        .search {
          background-color: #0077ff;
          color: #fff;
        }
        .reset {
          color: #0077ff;
          border: 1px solid #0077ff;
        }
        ::v-deep.el-input__inner {
          // background-color: #F5F5FA !important;
          color: #333 !important;
        }
        .el-input {
          width: 150px;
        }
        .el-select {
          width: 150px;
        }
      }
    }
    .footerPage {
      padding: 0 30px 0 0;
      display: flex;
      justify-content: right;
      width: 100%;
      background-color: #f8fafc;
      height: 50px;
      align-items: center;
      margin-top: 10px;

      //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
      //   background-color: #087 !important;
      // }
    }
  }
}
</style>
